<template>
  <div>
    <a-rate v-model:value="value1" allowHalf :tooltips="desc">
      <template #character>
        <heart-outlined />
      </template>
    </a-rate>
    <br />
    <a-rate
      v-model:value="value2"
      character="A"
      allow-half
      style="font-size: 36px"
    />
    <br />
    <a-rate v-model:value="value3" character="好" allow-half />
    <br />
  </div>
</template>
<script>
import { HeartOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const value1 = ref(2);
    const value2 = ref(2.5);
    const value3 = ref(0.5);
    const desc = ref(["terrible", "bad", "normal", "good", "wonderful"]);
    return {
      value1,
      value2,
      value3,
      desc,
    };
  },

  components: {
    HeartOutlined,
  },
});
</script>
